<template>
  <div class="wrapper">
    <!-- 搜索栏 -->
    <div class="search-bar">
      <div class="btn-back"><i class="iconfont">&#xe600;</i></div>
      <div class="search">
        <i class="iconfont">&#xe612;</i>
        <input type="text" v-model="hotSearchWord">
      </div>
      <div class="btn-search">搜索</div>
    </div>
    <!-- 分类容器 -->
    <div class="main">
      <!-- 左侧导航栏 -->
      <div class="left-side" ref="leftSide">
        <ul>
          <template v-for="(item, index) in primaryClassification">
            <li :class="{'active': index === currentActived}" :key="index" @click="changeActived(item.idx, index)">{{item.name}}</li>
          </template>
        </ul>
      </div>
      <!-- 右侧内容子分类 -->
      <div class="right-content" ref="rightContent">
        <div class="recommend-list" v-if="showRecommendGoods">
          <goods-recommend :goodsList="recommendGoodsList"></goods-recommend>
        </div>
        <div class="child-category" v-else>
          <div class="second-category-item" v-for="second in childCategory" :key="second.idx">
            <div class="category-title">{{second.name}}</div>
            <div class="category-list">
              <div class="third-category-item" v-for="third in second.thirdCategory" :key="third.idx">
                <img v-lazy="third.images">
                <span>{{third.name}}</span>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- 导航 -->
    <tabbar :current="2"></tabbar>
  </div>
</template>
<script>
import BScroll from 'better-scroll'
import goodsRecommend from '@/components/goods/goods-recommend.vue'
import tabbar from '@/components/tabbar'
import {toast} from '@/libs/toast'
export default {
  mounted () {
    this.getPrimaryClassification()
    this.getRecommendGoodsList()
    this.$nextTick(() => {
      this.leftScroll = new BScroll(this.$refs.leftSide, {click: true})
      this.initRightScroll()
    })
  },
  data () {
    return {
      hotSearchWord: '酸奶超级单品日满199减100',
      showRecommendGoods: true,
      recommendGoodsList: [],
      primaryClassification: [],
      currentActived: 0,
      childCategory: []
    }
  },
  components: {
    'goods-recommend': goodsRecommend,
    'tabbar': tabbar
  },
  methods: {
    initRightScroll () {
      this.rightScroll = new BScroll(this.$refs.rightContent, {click: true})
    },
    changeActived (idx, index) {
      this.currentActived = index
      this.showRecommendGoods = index === 0
      if (idx) {
        this.getChildCategory(idx)
      }
    },
    getPrimaryClassification () {
      this.$reqPost('Category/categoryFirst')
        .then(json => {
          if (json.error === '00') {
            let primaryClassification = json.data.list
            primaryClassification.unshift({'name': '推荐产品'})
            this.primaryClassification = primaryClassification
          } else {
            toast(json.message)
          }
        })
    },
    getRecommendGoodsList () {
      this.$reqPost('Goods/goodsGetRecommend')
        .then(json => {
          if (json.error === '00') {
            this.recommendGoodsList = json.goods.goods
          } else {
            toast(json.message)
          }
        })
    },
    getChildCategory (idx) {
      this.$reqPost('Category/categoryList', {
        parentId: idx
      }).then(json => {
        if (json.error === '00') {
          this.childCategory = json.data
          this.initRightScroll()
        } else {
          toast(json.message)
        }
      })
    }
  }
}
</script>
<style lang="less" scoped>
.search-bar{
  display: flex;
  height: 86*@rex;
  background: @white;
  border-bottom: 1*@rex solid @border;
}
.btn-back{
  width: 86*@rex;
  line-height: 86*@rex;
  font-size: 40*@rex;
  text-align: center;
  color: @semi;
}
.search{
  flex: 1;
  height: 56*@rex;
  line-height: 56*@rex;
  background: #f7f7f7;
  border-radius: 10*@rex;
  display: flex;
  padding: 0 20*@rex;
  margin: 15*@rex 0;
  i{
    font-size: 32*@rex;
    margin-right: 10*@rex;
  }
  input{
    flex: 1;
    font-size: 28*@rex;
    background: none;
    color: @text-black;
  }
}
.btn-search{
  width: 100*@rex;
  height: 56*@rex;
  line-height: 56*@rex;
  font-size: 28*@rex;
  text-align: center;
  margin: 15*@rex;
  background: @text-red;
  border-radius: 10*@rex;
  color: @white;
}
.main{
  width: 750*@rex;
  display: flex;
  position: absolute;
  top: 87*@rex;
  bottom: 94*@rex;
  overflow: hidden;
}
.left-side{
  width: 160*@rex;
  background: @bg;
  li{
    height: 100*@rex;
    line-height: 100*@rex;
    font-size: 28*@rex;
    text-align: center;
    &.active{
      color: @text-red;
      background: @white;
    }
  }
}
.right-content{
  flex: 1;
  background: @white;
}
.recommend-list, .child-category{
  padding: 20*@rex;
}
.second-category-item + .second-category-item{
  margin-top: 20*@rex;
}
.category-title{
  font-size: 28*@rex;
  font-weight: bold;
}
.category-list{
  display: flex;
  flex-wrap: wrap;
}
.third-category-item{
  flex: 1;
  width: 33.33%;
  max-width: 33.33%;
  min-width: 33.33%;
  margin: 20*@rex 0;
  img{
    width: 80%;
    height: auto;
    display: block;
    margin: 0 auto;
  }
  img[lazy=loading] {
    width: 16px;
    height: 16px;
  }
  span{
    line-height: 28*@rex;
    font-size: 28*@rex;
    color: @text-black;
    display: block;
    text-align: center;
    padding-top: 10*@rex;
  }
}
</style>
